<template>

    <div class="content-info">
            <div class="content-header">
                <div class="content-title-swap">
                    <div class="content-title">
                      <span class="title" v-html="routerInfo.title"></span>
                    </div>
                   <div class="content-grade">
                     <span>
                        {{routerInfo.grade}}星
                     </span>
                   </div>
                </div>
                <div class="content-detail" >
                 <span v-html="routerInfo.content"></span>
                </div>
              <div class="content-footer">

                  <div class="swap-group" v-if="routerInfo.isExchange">
                    <span>评论</span>
                  </div>

                  <div class="swap-group" v-else>
                    <span @click="exchangeResourceInfo()">兑换资源(积分:{{routerInfo.costGrade}})</span>
                  </div>

                  <div class="swap-group">
                    <span>分享</span>
                  </div>
              </div>
            </div>
            <div class="content-body">

            </div>
    </div>

</template>

<style scoped>

  .content-info{
    margin: 10px auto 5px;
    width: 80%;
  }
  .content-header{
    background-color: white;
    padding: 18px 10px 10px 19px;
    display: flex;
    flex-direction: column;
  }
  .content-body{
    min-height: 800px;
    margin-top: 20px;
    background-color: white;
  }

  .content-grade span{
    font-size: 16px;
    font-weight: 600;
  }

  .content-title span{
    font-size: 16px;
    font-weight: 600;
  }
  .content-detail{

    margin-top: 20px;
    margin-left: 20px;
  }
  .content-detail span{
    font-size: 13px;
    font-weight: 300;
  }
  .content-title-swap{
    display: flex;
    justify-content: space-between;
  }

  .swap-group{
    display: inline-block;
    margin-left: 20px;
    font-size: 16px;
    font-weight: 500;
  }
  .swap-group span{
    cursor: pointer;
  }

  .content-footer{
    margin-top: 20px;
  }
</style>

<script>

    export default {
        data() {
            return {
              routerInfo:{
                title:"",
                grade:"",
                content:"",
                isExchange:"",
                costGrade:""
              }
            }
        },
      created:function(){
          this.initResourceInfo();
      },
      methods:{
        initResourceInfo:function (){
          this.$axios({
            method:"get",
            url:"/resourceCenter/resourceInfoUser/getResourceInfoUserInfo?uuid="+this.$route.query.resourceId
          }).then(res=>{

            if (res.data.success === true){

              this.routerInfo = res.data.data.resourceInfoUser;
              this.isExchange = res.data.data.exchange;

            } else{

              this.$message.error(res.data.msg);

            }
          })
        },
        exchangeResourceInfo:function () {
          this.$axios({
            method: "get",
            url: "/resourceCenter/resourceInfoUser/exchangeResource?uuid="+this.routerInfo.uuid
          }).then(res=>{
            if (res.data.success === true){

              this.$message({
                message: res.data.msg,
                type: 'success'
              });
            } else{
              debugger
              this.$message.error(res.data.msg);
            }

          })
        }
      }
    }

</script>
